<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content el-container is-vertical" @click="isShow=false">
            <h2 class="pagetitle">{{$t('l.personal_241')}}</h2>
            <div class="personCon el-main">
                <div class="createpanel clearfix">
                    <h2 class="persontitle">{{$t('l.personal_241')}}</h2>
                    <div class="leftbar">
                        <p class="title">{{$t('l.home_11')}}</p>
                        <div class="putgroup clearfix" @click.stop>
                            <input class="comput small" v-model="coin" @focus="showlist" readonly>
                            <drop-down @inputValue="getInputValue" @item-click="itemClick" :placeholder="placeholder" :itemlist="coinlist" :nodatatext="nodatatext" :isShow="isShow" style="width:406px;top:40px;"></drop-down>
                        </div>
                        <span class="fr" v-show="coin=='USDT'">
                            <div class="checktab fl">
                                <a :class="type==18?'active':''" @click="itemClickUSDT(18)">ERC20</a>
                                <a :class="type==4?'active':''" @click="itemClickUSDT(4)">OMNI</a>
                            </div>
                        </span>
                        <p class="title">{{$t('l.add_33')}}</p>
                        <div class="putgroup clearfix">
                            <textarea class="comput" style="width:100%;height:80px;" v-model="address" :placeholder="$t('l.personal_250')"></textarea>
                            <p class="errortext"></p>
                        </div>
                        <a class="btn changebtn" @click.stop="checkaddress">{{$t('l.advert_about23')}}</a>
                    </div>
                    <div class="rightbar">
                        <p class="title">{{$t('l.personal_243')}}</p>
                        <div class="putgroup clearfix">
                            <input class="comput small" v-model="tag" :placeholder="$t('l.personal_244')">
                        </div>
                        <p class="title" v-show="tagDescribe">{{tagDescribe}}</p>
                        <div class="textareagroup" v-show="tagDescribe">
                            <textarea :placeholder="$t('l.add_4')" v-model="remark"></textarea>
                            <label for="markcheck" class="checkbox" :class="ismark?'active':''" style="top:-20px;" @click="ismark=!ismark">
                                <span>{{$t('l.personal_245')}}</span>
                            </label>
                        </div>
                        <p class="memotip" v-show="tagDescribe">{{$t('l.personal_246')}}</p>
                    </div>   
                </div>
                <div class="createpanel" style="margin-top:24px;">
                    <div class="btnpannel clearfix">
                        <h2 class="persontitle fl">{{$t('l.personal_247')}}</h2>
                        <a class="headbtn fr" style="margin-left:32px;" @click.stop="removeApi">{{$t('l.personal_248')}}</a>
                        <div class="searchput fr">
                            <input :placeholder="$t('l.trade_2')" v-model="likecoin">
                            <i @click.stop="addressTagList"></i>
                        </div>
                    </div>
                    
                    <div class="apikey">
                        <el-table
                                ref="multipleTable"
                                :data="tagList"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                prop="code"
                                :label="$t('l.home_11')"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="tag"
                                :label="$t('l.personal_243')"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                :label="$t('l.add_33')"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="remark"
                                label="Memo / Tag / Payment ID / ...."
                                show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>    
            </div>
        </div>
        
        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click.stop="createAddress">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click.stop="createAddress">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--谷歌校验-->
        <div class="popWraper" v-show="ischeck && status=='ga'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_47')}}</p>
                        <input class="comput small" v-model="verifyCode" placeholder="$t('l.personal_44')" style="width:100%;">
                        <a class="btn allcell martop30" @click.stop="createAddress">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import dropDown from "@/components/dropdown";
export default {
    components: {
        PersonalHeader,
        PersonalSide,
        dropDown
    },
    data() {
        return {
            multipleSelection: [],
            coinlist:[],
            coin:"",
            address:"",
            remark:"",
            tag:"",
            verifyCode:"",
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            tagList:[],
            currentCoin:[],
            likecoin:"",
            account:"",
            isShow:false,
            nodatatext:"",
            tagDescribe:"",
            ismark:false,
            placeholder:this.$t('l.add_130'),
            type:0
        }
    },
    created(){
        this.getCoins();
        this.addressTagList();
        let intro = this.$store.state.userintro;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
    },
    methods:{
        showlist(){
            this.isShow = true;
        },
        itemClick(data) {
            this.coin= data.code;
            //this.currentCoin = data;
            this.isShow = false;
            
            if(this.coin=="USDT"){
                if(this.type==0){
                    this.itemClickUSDT(18)
                }else{
                    this.itemClickUSDT(this.type)
                }
            }else{
                this.findCoinAssets(data.currencyId);
            }
        },
        itemClickUSDT(coinid) {
            //console.log("点击id",coinid)
            this.type=coinid;
            this.isShow = false;
            //data.currencyId = coinid
            this.findCoinAssets(coinid);
        },
        
        //获取币种信息
        async findCoinAssets(currencyId){
            let that = this;
            let res = await api.findByCurrencyId({currencyId:currencyId});
            if(res.data.code==0){
                that.tagDescribe = res.data.data.tagDescribe;
                this.currentCoin = res.data.data;
                console.log("currentCoin",this.currentCoin);
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.coinlist = this.datalist;
                return;
            }
            let coinlist = [];
            // 请求获取筛选列表
            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue.toUpperCase()) != -1){
                    coinlist.push(item);
                }
            })
            this.coinlist = coinlist;
            //this.currentCoin = this.coinlist[0];
        },
        handleSelectionChange(val) {
            let that = this;
            this.multipleSelection = val;
            that.delid = [];
            if(val.length>0){
                val.forEach(element => {
                    that.delid.push(element.id);
                });
            }
        },
        //倒计时
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }, 
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCode({
                email:that.account,
                type:"W"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.$store.state.userintro.phoneArea,
                phone:that.account,
                type:"W"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取币种列表
        async getCoins(){
            let that = this;
            let res = await api.coinsList();
            if(res.data.code==0){
                that.coinlist = res.data.data;
                that.datalist = res.data.data;
            }
        },
        //创建地址
        async createAddress(){
            let that = this;
            if(that.verifyCode==""){
                that.$layer.msg(that.$t('l.add_89'));
                return;
            }
            that.ischeck = false;
            let remark = "";
            that.tagDescribe!=="" && that.tagDescribe?remark=that.remark:remark="";
            let res = await api.createOrEditAddressTag({
                address:that.address,
                //currency:that.coin,
                currency:that.currentCoin.code,
                remark:remark,
                tag:that.tag,
                verifyCode:that.verifyCode
            });
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_37'));
                that.verifyCode = '';
                that.addressTagList();
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==1210004){
                that.$layer.msg(that.$t('l.add_90'));
            }else if(res.data.code==1210015){
                that.$layer.msg(that.$t('l.add_113'));
            }else if(res.data.code==1210002){
                that.$layer.msg(that.$t('l.add_117'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取列表
        async addressTagList(){
            let that = this;
            let res = await api.addressTagList({
                currency:that.likecoin,
                pageNum:1,
                pageSize:100
            });
            if(res.data.code==0){
                that.tagList = res.data.data.records;
            }
        },
        //删除地址
        async removeApi(){
            let that = this;
            let res = await api.deleteAddressTag(that.delid);
            if(res.data.code==0){
                 that.verifyCode = "";
                 that.$layer.msg(that.$t('l.personal_53'));
                 that.addressTagList();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        checkaddress(){
            let that = this;
            if(that.coin==""){
                that.$layer.msg(that.$t('l.personal_249'));
                return;
            }else if(that.address==""){
                that.$layer.msg(that.$t('l.personal_250'));
                return;
            }else if(that.tag==""){
                that.$layer.msg(that.$t('l.personal_251'));
                return;
            }else{
                that.ischeck = true;
                that.setPro = 'add'
            }
        }
    },
    mounted(){
        
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    
    .createpanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        box-sizing: border-box;
        .leftbar{
            float:left;
            width:48%;
            padding-top:46px;
            padding-left :100px;
            box-sizing: border-box;
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
        .title{
            font-size:14px;
            font-weight:400;
            color:rgba(51,56,94,1);
            line-height:20px;
            padding-bottom:5px;
        }
        .rightbar{
            float:right;
            width:48%;
            padding-top:46px;
            padding-right:100px;
            box-sizing: border-box;
            .memotip{
                padding-left:33px;
                font-size:14px;
                color:#F78900;
                line-height:24px;
                margin-top:10px;
                background:url(../../assets/images/tip1.png) no-repeat left top 3px;
            }
        }
        .checktab{
                padding-right:24px;
                a{
                    width:82px;
                    height:32px;
                    border:1px solid rgba(221,224,235,1);
                    box-sizing: border-box;
                    text-align:center;
                    color:rgba(51,56,94,1);
                    line-height:32px;
                    float:left;
                    cursor: pointer;
                    &:first-child{
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                    }
                    &:last-child{
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                    &.active{
                        background:#2D8DFE;
                        background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                        color:#fff;
                        border:none;
                    }
                }
            }
        .apikey{
            .apikeytable{
                width:100%;
                thead tr{
                    background:#f2f6fa;
                    th{
                        line-height:50px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        font-size:14px;
                    }
                }
                tbody tr{
                    border-bottom:1px solid #F2F6FA;
                    td{
                        font-size:14px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:50px;
                        text-align:center;
                    }
                }
            }
        }
    }
}
</style>



